<template>
  <el-container class="bg">
    <el-header class="header">
      <topHeader />
      <div class="title">
        报表统计
        <timeSelect
          style="margin-left: 10px"
          @fun="fun"
        />
      </div>
      <div class="nowTime">{{ time }}</div>
    </el-header>
    <el-main class="main">
      <el-row :gutter="20">
        <el-col :span="8">
          <cuisineRank />
          <weekStat />
          <tasteRank />
        </el-col>
        <el-col :span="8">
          <overall />
          <timeQuantity />
          <timeCustom />
        </el-col>
        <el-col :span="8">
          <dishRank />
          <monthStat />
          <tasteQuantityRank />
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import topHeader from "./topHeader.vue";
import cuisineRank from "./cuisineRank.vue";
import dishRank from "./dishRank.vue";
import monthStat from "./monthStat.vue";
import weekStat from "./weekStat.vue";
import overall from "./overall.vue";
import priceRangeRank from "./priceRangeRank.vue";
import tasteRank from "./tasteRank.vue";
import tasteQuantityRank from "./tasteQuantityRank.vue";
import timeQuantity from "./timeQuantity.vue";
import timeCustom from "./timeCustom.vue";
import timeSelect from "../../components/common/timeSelect.vue";
export default {
  components: {
    topHeader,
    cuisineRank,
    dishRank,
    monthStat,
    overall,
    priceRangeRank,
    tasteRank,
    tasteQuantityRank,
    weekStat,
    timeQuantity,
    timeCustom,
    timeSelect,
  },
  provide() {
    return {
      orderBy: this.orderBy,
    };
  },
  data() {
    return {
      time: new Intl.DateTimeFormat("default", {
        dateStyle: "full",
        timeStyle: "medium",
      }).format(),
      orderBy: 0,
    };
  },
  methods: {
    fun(val) {
      this.orderBy = val;
      console.log(this.orderBy);
    },
    getTime() {
      this.time = new Intl.DateTimeFormat("default", {
        dateStyle: "full",
        timeStyle: "medium",
      }).format();
      window.requestAnimationFrame(this.getTime);
    },
  },
  mounted() {
    this.getTime();
  },
};
</script>
<style lang="less" scoped>
.bg {
  color: #fff;
  background-image: url(http://8.138.102.145/images/20231203141553.png) !important;
  .header {
    height: 80px;
    position: relative;
    .title {
      display: flex;
      align-items: center;
      position: absolute;
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      font-size: 34px;
      font-weight: bold;
    }
    .nowTime {
      position: absolute;
      right: 100px;
      top: 5px;
    }
  }
  .main {
    height: 100%;
    // background-color: blue;
  }
}
</style>
